<template>
  <div class="history-container">
    <van-nav-bar title="浏览历史" left-arrow @click-left="goBack" />

    <div class="book-list">
      <div v-for="(book, index) in books" :key="index" class="book-item">
        <div class="book-info">
          <img :src="book.url" alt="Book Cover" class="book-cover" />
          <div class="book-details">
            <div class="book-title">{{ book.name }}</div>
            <div class="book-author">{{ book.introduction }}</div>
<!--            <div class="book-progress">阅读到 {{ book.progress }}%</div>-->
          </div>
        </div>
<!--        <van-button-->
<!--            v-if="!book.inShelf"-->
<!--            type="info"-->
<!--            @click="addToShelf(index)"-->
<!--        >-->
<!--          加入书架-->
<!--        </van-button>-->
<!--        <span v-else>Added follow</span>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    // addToShelf(index) {
    //   this.books[index].inShelf = true; // 更新书籍状态
    //   this.$toast.success("已加入书架"); // 提示用户
    // },
    findHistory(uid) {
      this.axios.get('http://localhost:9999/api-novel/novel/findHistory?uid=' + uid).then(res => {
        this.books = res.data; // 初始化选中状态
        console.log(res);
      })
    },
  },
  created() {
    this.user = localStorage.getItem("user");
    let user = JSON.parse(this.user);
    console.log(user.id)
    this.uid = user.id;
    this.findHistory(this.uid);

  }
};
</script>

<style scoped>
.history-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.book-list {
  margin-top: 20px;
}

.book-item {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.book-cover {
  width: 60px;
  height: 80px;
  margin-right: 10px;
}

.book-details {
  flex: 1;
}

.book-title {
  font-size: 16px;
  font-weight: bold;
}

.book-author {
  font-size: 14px;
  color: #666;
}

.book-progress {
  font-size: 12px;
  color: #999;
}
</style>